<!DOCTYPE html>
<html lang="en" th:with="title='保存文章',active='publish'" xmlns:th="http://www.thymeleaf.org">
<header th:replace="admin/header::headerFragment(${title},${active})"></header>
<link rel="stylesheet" th:href="@{/static/admin/plugins/tagsinput/jquery.tagsinput.css}"/>
<link rel="stylesheet" th:href="@{/static/admin/plugins/select2.dist.css/select2-bootstrap.css}"/>
<link rel="stylesheet" th:href="@{/static/admin/plugins/toggles/toggles.css}"/>
<link href="/static/admin/plugins/lou-multi-select/css/multi-select.css" rel="stylesheet"/>
<link href="/static/admin/plugins/select2/css/select2.min.css" rel="stylesheet"/>
<link rel="stylesheet" th:href="@{/static/admin/plugins/editormd/css/editormd.min.css}"/>

<body class="fixed-left">
<div id="wrapper">
    <div th:replace="admin/header::header-body"></div>
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">
                            <th:block th:if="${null != content}">
                                编辑文章
                            </th:block>
                            <th:block th:unless="${null != content}">
                                发布文章
                            </th:block>
                        </h4>
                    </div>
                    <div class="col-md-12">
                        <form id="articleForm" novalidate="novalidate" role="form">
                            <input id="categories" name="categories" type="hidden"/>
                            <input id="id" name="id"
                                   th:value="${content!=null and content.id!=null}?${content.id}: ''"
                                   type="hidden"/>
                            <input id="status" name="status"
                                   th:value="${content!=null and content.status !=null}?${content.status}: 'publish'"
                                   type="hidden"/>
                            <input id="allowComment" name="allowComment"
                                   th:value="${content!=null and content.allowComment !=null}?${content.allowComment}: true"
                                   type="hidden"/>
                            <input id="content-editor" name="content" type="hidden"/>

                            <div class="form-group col-md-12" style="padding: 0 10px 0 0;">
                                <input aria-required="true" class="form-control" name="title" placeholder="请输入文章标题（必须）"
                                       required="required"
                                       th:value="${content!=null and content.title!=null }?${content.title}: ''"
                                       type="text"/>
                            </div>

                            <div class="form-group col-md-6" style="padding: 0 10px 0 0;">
                                <input class="form-control" id="tags" name="tags" placeholder="请填写文章标签"
                                       th:value="${content!=null and content.tags !=null}?${content.tags}: ''"
                                       type="text"/>
                            </div>

                            <div class="form-group col-md-6 selectPickerWrapper showCategories" th:attr="data-checks=${categoryNames}">
                                <select class="select2 form-control hidden" data-placeholder="请选择分类..." id="multiple-sel"
                                        multiple="multiple">
                                    <th:block th:if="${null == categories}">
                                        <option selected="selected" value="默认分类">默认分类</option>
                                    </th:block>
                                    <th:block th:unless="${null == categories}">
                                        <th:block th:each="c : ${categories}">
                                            <option th:selected="${null !=content and adminCommons.existCat(c, content.categories)}?true:false"
                                                    th:text="${c.name}"
                                                    th:value="${c.name}"></option>
                                        </th:block>
                                    </th:block>
                                </select>
                            </div>
                            <div id="text-md-editor" class="form-group">
                               <textarea autocomplete="off" class="markdown-textarea" id="text" name="text"
                                         style="height: 480px"
                                         th:utext="${content!=null and content.content !=null}?${content.content}: ''"></textarea>
                            </div>

                            <div class="form-group col-md-3 col-sm-4">
                                <label class="col-sm-4">开启评论</label>
                                <div class="col-sm-8">
                                    <div onclick="allowComment(this);"
                                         th:class="${content!=null and content.allowComment!=null }?'toggle toggle-success allow-'+${content.allowComment}:'toggle toggle-success allow-true'"></div>
                                </div>
                            </div>

                            <div class="clearfix"></div>

                            <div class="text-right">
                                <a class="btn btn-default waves-effect waves-light" th:href="@{/admin/article}">返回列表</a>
                                <button class="btn btn-primary waves-effect waves-light"
                                        onclick="subArticle(1);"
                                        type="button">
                                    保存文章
                                </button>
                                <button class="btn btn-warning waves-effect waves-light" onclick="subArticle(0);"
                                        type="button">
                                    存为草稿
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                <div th:replace="admin/footer :: footer-content"></div>
            </div>
        </div>
    </div>
</div>
<div th:replace="admin/footer :: footer"></div>

<script th:src="@{/static/admin/plugins/tagsinput/jquery.tagsinput.min.js}"></script>
<script th:src="@{/static/admin/plugins/jquery-multi-select/jquery.quicksearch.js}"></script>
<script th:src="@{/static/admin/plugins/editormd/js/editormd.js}"></script>
<script th:src="@{/static/admin/plugins/lou-multi-select/js/jquery.multi-select.js}"></script>
<script th:src="@{/static/admin/plugins/select2/js/select2.min.js}"></script>
<script th:src="@{/static/admin/plugins/jquery-toggles/js/toggles.min.js}"></script>
<script th:src="@{/static/admin/js/article.js}"></script>

</body>
<script type="text/javascript">
    $(function () {
        editormd("text-md-editor", {
            width: "100%",
            height: 500,
            syncScrolling: "single",
            path: "/static/admin/plugins/editormd/lib/",
            pluginPath: "/static/admin/plugins/editormd/plugins/",
            flowChart: true,
            emoji: true,
            taskList: true
        });
    });
</script>
</html>